<template>
  <ych-modal
    :fullscreen="false"
    :title="title"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :cancelText="$t('m.common.button.close')"
  >
    <a-form>
      <a-row>
        <a-col :span="24">
          <vxe-table
            header-align="center"
            border
            show-header-overflow
            show-overflow
            :row-config="{isHover: true, keyField: 'id'}"
            :edit-config="{trigger: 'click', mode: 'cell'}"
            :data="dataSource">
            <vxe-column type="seq" :title="$t('m.common.label.number')" width="50" align="center"></vxe-column>
            <vxe-column field="parameterKey" :title="$t('m.eform.appview.entity.parameterKey')" :min-width="120"></vxe-column>
            <vxe-column field="parameterName" :title="$t('m.eform.appview.entity.parameterName')" :min-width="120"></vxe-column>
            <vxe-column field="parameterType" :title="$t('m.eform.appview.entity.parameterType')" :formatter="formatterType" :min-width="120" align="center"></vxe-column>
            <vxe-column field="outKey" :title="$t('m.eform.appview.entity.outKey')" :edit-render="{name: 'input'}" :min-width="120"></vxe-column>
            <vxe-column field="isRequired" :title="$t('m.eform.appview.entity.isRequired')" :edit-render="{}" :min-width="110" align="center">
              <template #default="{ row }">
                <vxe-checkbox v-model="row.isRequired" checked-value="Y" unchecked-value="N"></vxe-checkbox>
              </template>
              <template #edit="{ row }">
                <vxe-checkbox v-model="row.isRequired" checked-value="Y" unchecked-value="N"></vxe-checkbox>
              </template>
            </vxe-column>
            <vxe-column field="defaultValue" :title="$t('m.eform.apptable.entity.colDefaultVal')" :edit-render="{name: 'input'}" :min-width="120"></vxe-column>
            <vxe-column field="customMessage" :title="$t('m.eform.apptable.entity.customMessage')" :edit-render="{name: 'input'}" :min-width="150"></vxe-column>
          </vxe-table>
        </a-col>
      </a-row>
    </a-form>
  </ych-modal>
</template>

<script>

import {getAction} from '@/api/manage'
import {EFormConstant} from "../../EFormConstant";
import YchConstant from '@/api/YchConstant'

export default {
  name: 'OutParameterDialog',
  data() {
    return {
      title: this.$t('m.eform.formDesign.label.chu-can-pei-zhi'),
      visible: false,
      dataSource: [],
      url: {
        getInParameterJson: YchConstant.PREFIX_EFORM + '/manage/actAppView/getInParameterJson'
      }
    }
  },
  methods: {
    open(outParameter, viewCode) {
      getAction(this.url.getInParameterJson, {viewCode: viewCode}).then(res => {
        if (res.success) {
          if (!res.result) {
            this.messageUtil.warning(this.$t('m.eform.formDesign.label.suo-xuan-ye-mian-mo-xing-wei-she-zhi-ru-can-xin-xi'))
            return
          }
          const newDataSource = JSON.parse(res.result)
          const oldDataSource = outParameter ? JSON.parse(outParameter) : []

          let count = 0;
          newDataSource.forEach(item => {
            const outData = oldDataSource.find(vo => vo.parameterKey === item.parameterKey)
            if (outData) {
              count++;
              item.outKey = outData.outKey;
              item.defaultValue = outData.defaultValue;
              item.isRequired = outData.isRequired;
              item.customMessage = outData.customMessage || "";
            } else {
              item.outKey = "";
              item.customMessage = "";
            }
          })
          if (oldDataSource.length > 0 && (count !== oldDataSource.length || count !== newDataSource.length)) {
            this.messageUtil.warning(this.$t('m.eform.formDesign.label.parameterTip'))
          }
          this.dataSource = newDataSource;
          this.visible = true
        } else {
          this.messageUtil.warning(res.message)
        }
      })
    },
    handleOk() {
      this.$emit('selectFinished', this.dataSource.length === 0 ? null : JSON.stringify(this.dataSource))
      this.visible = false
    },
    handleCancel() {
      this.visible = false
    },
    formatterType({cellValue}) {
      let item = EFormConstant.colTypeForParameter.find(item => item.value === cellValue)
      return item ? item.label : ''
    },
  }
}
</script>
